<template>
	<div id="login_box">
		<div class="ms-login">
			<div class="log_title">后台管理系统</div>
			<div>
				<el-form :model="modelData" label-width="0px" class="demo-ruleForm">
					<div class="info_part">
						<el-form-item prop="username" class="input_box">
                            <el-input v-model.trim="modelData.username" placeholder="请输入用户名" :maxlength="50" @keyup.enter.native="submitForm('modelData')">
                                <template slot="prepend"><i class="el-icon-user"></i></template>
                            </el-input>
						</el-form-item>
						<el-form-item prop="password" class="input_box">
                            <el-input type="password" placeholder="请输入密码" v-model.trim="modelData.password" :maxlength="50" @keyup.enter.native="submitForm('modelData')">
                                <template slot="prepend"><i class="el-icon-lock"></i></template>
                            </el-input>
						</el-form-item>
						<div class="login-btn">
							<el-button type="primary" @click="submitForm()">登录</el-button>
						</div>
					</div>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
// import action from "../action.js";
export default {
    data() {
        return {
            modelData: {
                account: "",
                password: ""
            }
        };
    },
    mounted() {
        // this.getRsaKey();
    },
    methods: {
        // ...action,
        submitForm() {
            // let rule = [
            //     {
            //         name: "username",
            //         label: "用户名",
            //         rule: ["validateEmpty"]
            //     },
            //     {
            //         name: "password",
            //         label: "密码",
            //         rule: ["validatePwd"]
            //     }
            // ];

            // if (!this.validatetool.validate(this, this.modelData, rule)) {
            //     return;
            // }
            this.$store.commit('changeValue', {
                name: 'tagsList',
                value: []
            });
            // this.$store.commit('changeValue', {
            //     name: 'newInfo',
            //     value: res.result
            // });
            this.$router.push('/home');
            // this.login();
        }
    }
};
</script>

<style lang="less">
#login_box {
    position: relative;
    min-width: 100vw;
    min-height: 100vh;
    .ms-title {
        position: absolute;
        top: 50%;
        width: 100%;
        margin-top: -230px;
        text-align: center;
        font-size: 30px;
        color: #fff;
    }
    .logo img {
        width: 300px;
    }
    .log_title {
        color: #f63;
        font-size: 26px;
        padding-bottom: 10px;
        font-family: MicrosoftYaHei;
        font-weight: bold;
        letter-spacing: 2px;
    }
    .top_line {
        color: #f63;
        font-size: 20px;
        font-family: MicrosoftYaHei;
    }
    .ms-login {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 20px 60px 65px;
        background: #fff;
        box-shadow: rgba(153, 153, 153, 0.35) 0px 0px 10px;
        background-size: 100% 100%;
		text-align: center;
		.info_part {
			margin-top: 20px;
		}
		.input_box {
			max-width: 300px;
			position: relative;
			margin: 0 auto 30px;
			.el-form-item__content {
				display: flex;
				align-items: center;
				.img_icon {
					font-size: 20px;
					position: absolute;
					z-index: 20;
					left: 10px;
					top: 16px;
				}
				.el-input--small .el-input__inner {
					height: 50px !important;
					line-height: 50px !important;
					padding-left: 45px;
					color: #aaa;
					width: 100%;
				}
			}
		}
		.login-btn {
			max-width: 300px;
			margin: 0 auto;
			button {
				width: 100%;
				height: 50px !important;
			}
		}
    }
}
</style>
